<template>
	<view class="content">
		<!-- 图片 -->
		<view class="image">
			<image :src="imageList[imageNum]" mode=""></image>
		</view>
		<!-- 秒杀商品，商品排行榜 -->
		<!-- <view class="shop-cont">
			<view class="coupon-shop">
				活动商品
			</view>
			<view class="ranking-shop">
				商品排行
			</view>
		</view> -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				imageList:[
					"/static/image/item1.jpg",
					"/static/image/item2.jpg",
					"/static/image/item3.jpg",
					"/static/image/item4.jpg",
				],
				imageNum:0
			}
		},
		methods:{
			changeImg(){
				if(this.imageNum<this.imageList.length-1){
					this.imageNum++
				}else{
					this.imageNum=0
				}
			}
		},
		mounted(){
			const timer = setInterval(()=>{	
				this.changeImg()
			}, 3000) // 每两秒执行1次
			this.$once('hook:beforeDestroy',()=>{
				// 在页面销毁时，销毁定时器
				clearInterval(timer)
			})
		}
	}
</script>

<style scoped>
	/* 图片 */
	.image{
		display: flex;
		margin-top: 20rpx;
		height: 150rpx;
		width: 100%;
		line-height: 100rpx;
		background-color: #007AFF;
		border-radius: 20rpx;
		
	}
	.image>image{
		width: 100%;
		height: 150rpx;
		border-radius: 20rpx;
	}
	
	/* 秒杀商品，商品排行榜 */
	.shop-cont{
		display: flex;
		margin-top: 20rpx;
		height: 150rpx;
		width: 100%;
	}

	.coupon-shop{
		height: 150rpx;
		width: 47%;
		border-radius: 15rpx;
		background-color: #4CD964;
	}
	.ranking-shop{
		height: 150rpx;
		width: 47%;
		margin-left: 6%;
		border-radius: 15rpx;
		background-color: #F4D03F;
	}
	
</style>
